import React from 'react';
import Time from './Time';
import Icon from '../Icon';
import classNames from 'classnames';
import Dom from '../utils/Dom';
import {dateFormat, alignPostion} from '../utils/Utils';

class Comp extends React.Component {
    static displayName = 'Comp';

    static defaultProps = {
        format: 'hh:mm:ss',
        align: 'bottomLeft'
    };

    state = {
        open: false,
        optionStyle: {}
    }

    onChange = (current) => {
        const {value} = this.props;
        const time = value ? value : new Date();
        time.setHours(current[0]);
        time.setMinutes(current[1]);
        time.setSeconds(current[2]);
        this.props.onChange && this.props.onChange(time);
    }

    onShowHide = (e) => {
        const {disabled, align} = this.props;
        const ele = e.target || e.srcElement;
        // click clear icon
        if (ele.tagName === 'I' && ele.className.indexOf('cm-time-picker-clear') !== -1) {
            return;
        }
        if (disabled) {
            return;
        }
        const open = this.state.open;
        this._isMounted && this.setState({
            open: !open
        }, () => {
            const optionStyle = alignPostion(align, this.rel, this.dropdown);
            this.setState({
                optionStyle
            });
        });
    }

    componentDidMount () {
        this._isMounted = true;
        document.addEventListener('click', this.clickAnyWhere.bind(this), false);
    }

    componentWillUnmount () {
        this._isMounted = false;
        document.removeEventListener('click', this.clickAnyWhere);
    }

    clickAnyWhere (e) {
        const ele = e.target || e.srcElement;
        const parent = Dom.closest(ele, '.cm-time-picker');
        if (parent && parent == this.wrap) {
            return ;
        } else {
            this._isMounted && this.setState({
                open: false
            });
        }
    }

    close () {
        this._isMounted && this.setState({
            open: false
        });
    }

    onClear = () => {
        this.props.onChange && this.props.onChange('');
    }

    render () {
        const {value, format, className, style, disabled, align, theme, size, clearable, disabledTime} = this.props;
        let time = value;
        if (!time) {
            time = new Date();
            time.setHours(0);time.setMinutes(0);time.setSeconds(0);
        }
        const current = [time.getHours(), time.getMinutes(), time.getSeconds()];
        const clazzName = classNames('cm-time-picker', className, {
            'cm-time-picker-disabled': disabled,
            [`cm-time-picker-${align}`]: align,
            [`cm-time-picker-${theme}`]: theme,
            [`cm-time-picker-${size}`]: size,
            'cm-time-picker-clearable': !disabled && clearable && value !== '',
            'cm-time-picker-open': this.state.open
        });
        const text = value ? dateFormat(format, value) : '';
        return <div className={clazzName} style={style} ref={f => this.wrap = f}>
            <div className='cm-time-picker-value' onClick={this.onShowHide} tabIndex='0' ref={f => this.rel = f}>
                <input type='hidden' name={name} value={value} />
                <div className='cm-time-picker-text'>{text}</div>
                <Icon name='clock' className='cm-time-picker-cert'/>
                {
                    clearable
                        ? <Icon name='x-circle' className='cm-time-picker-clear' onClick={this.onClear}/>
                        : null
                }
            </div>
            <div className='cm-time-picker-wrap' ref={f => this.dropdown = f} style={this.state.optionStyle}>
                <Time format={format} current={current} onChange={this.onChange} disabledTime={disabledTime} 
                />
            </div>
        </div>;
    }
}

export default Comp;
